<template>
  <views class="member_list_detail">
    <!-- 从业人员 -->
    <div class="employment">
      <viewTitle :title="'寄件人员详情'" :button="true"  :btitle="'返回'" @clickBtn="goBlack"></viewTitle>
      <div class="employment_list">
        <!-- 姓名 职位 身份证号 -->
        <!-- <div class="name_the_card flex flexR center">
          <div class="flex flexR">
            <div>状态：</div>
            <div class="end">{{detail.status_desc}}</div>
          </div>
          <div class="flex flexR">
            <div>注册时间：</div>
            <div class="end">{{detail.ctime}}</div>
          </div>
          <div class="flex flexR">
            <div>身份证号：</div>
            <div class="end">{{detail.card_no}}</div>
          </div>
        </div> -->
        <!-- 联系方式 所属企业 -->
        <div class="contact_enterprise flex flexR center">
          <div class="flex flexR">
            <div>姓名:</div>
            <div class="end">{{detail.card_name}}</div>
          </div>
          <div class="flex flexR">
          </div>
        </div>
        <div class="contact_enterprise flex flexR center">
          <div class="flex flexR">
            <div>联系方式：</div>
            <div class="end">{{detail.member_mobile}}</div>
          </div>
          <div class="flex flexR">
          </div>
        </div>
        <div class="contact_enterprise flex flexR center">
          <div class="flex flexR">
            <div>身份证号：</div>
            <div class="end">{{detail.card_no}}</div>
          </div>
          <div class="flex flexR">
          </div>
        </div>                
        <!-- 物流行业记录 -->
        <!-- <div class="record flex flexR center">
          <div class="flex flexC">
            <div>物流行业从业记录：</div>
            <div
              v-for="(item,index) in detail.record"  v-bind:key="index"
              class="end"
            >{{formatDate(item.record_time)}}--{{formatType(item.type)}}--{{item.company_name}}--{{formatProfession(item.profession)}}</div>
          </div>
        </div> -->
        <!-- 身份证 -->
        <div class="identity_card">
          <div class="flex flexR">
            <div>身份证：</div>
            <div class="end flex flexR">
<!--              <el-image-->
<!--                style="width: 100px; height: 100px"-->
<!--                :src="detail.card_img_cons"-->
<!--                :fit="'fill'"-->
<!--                :lazy="true"-->
<!--              >-->
<!--              </el-image>-->
              <img
                  style="width: 100px; height: 100px"
                  :src="detail.card_img_cons"
                  v-default-img
                  alt
              />
<!--              <el-image-->
<!--                style="width: 100px; height: 100px"-->
<!--                :src="detail.card_img_pros"-->
<!--                :fit="'fill'"-->
<!--                :lazy="true"-->
<!--              ></el-image>-->
              <img
                  style="width: 100px; height: 100px"
                  :src="detail.card_img_pros"
                  v-default-img
                  alt
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 物流记录 -->
    <div class="logistics_record">
      <viewTitle :title="'物流记录'"></viewTitle>
      <div class="logistics_record_num">共6条物流记录</div>
      <div class="table_list">
        <el-table :data="tableList" style="width: 100%" border :header-cell-style="getRowClass">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column prop="logistics_no" label="托运单号" width="180"></el-table-column>
          <el-table-column prop="company_name" label="承运物流企业" width="200"></el-table-column>
          <el-table-column prop="arrive_region_name" label="送达站点" width="300"></el-table-column>
          <el-table-column prop="post_communicate_name" label="寄件人" width="180"></el-table-column>
          <el-table-column prop="post_communicate_mobile" label="寄件人联系方式" width="180"></el-table-column>
          <el-table-column prop="receive_communicate_name" label="收件人" width="150"></el-table-column>
          <el-table-column prop="receive_communicate_mobile" label="收件人联系方式" width="180"></el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="success" @click="toDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex flexR paging">
          <el-pagination
            style="background:#fff; padding:10px 0"
            background
            layout="prev, pager, next,sizes,total, jumper"
            @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
            @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.page_size"
            :total="pagination.total_count"
            :current-page="pagination.current_page"
            :page-count="pagination.page_count"
          ></el-pagination>
        </div>
      </div>
    </div>
  </views>
</template>


<script>
export default {
  data() {
    return {
      tableList: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        }
      ],
      pagination: {
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
      member_id: null, // 详情ID
      detail:{},
    };
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 获取数据
    getData() {
      let post_data={
        member_id: this.member_id
      }
       this.$raxios.post(
        this.$mapapi.admin_memberDetail,
        { data:post_data }
      ).then(res=>{
        if(res.code==200){
          this.detail = res.data;
          this.logisticsList();
        }else{
        this.tableList = [];
        this.$message.error(res.msg);
        return;
        }
      }).catch(res=>{

      })
    },
    // 去托运单详情
    toDetail(row) {
      this.$toRoutePath({
        path: "/logistics_list/logistics_list_detail",
        edit: true,
        query: {logistics_id:row.logistics_id}
      });
    },
    goBlack() {
      this.$router.go(-1);
    },
    // 物流列表
    logisticsList(){
         let post_data={
        member_id: this.member_id
      }
      this.$raxios.post(
        this.$mapapi.admin_logisticsList,
        { data:post_data }
      ).then(res=>{
        if(res.code==200){
         this.tableList= res.data.list||[];
         this.pagination= res.data.pagination||{};
        }else{
        this.tableList = [];
        this.$message.error(res.msg);
        return;
        }
      }).catch(res=>{

      })
   
    }
  },
  created() {},
  mounted() {
    this.member_id = this.$route.query.member_id;
    this.getData(this.member_id);
  }
};
</script>



<style lang="less" :scope="true"   src="@/style/personnel_manager/member_list_detail.less">
</style>
